<template>
  <div class="assignment-header">
    <button class="back-button" @click="goBack">← 返回</button>
  </div>
  <div v-if="details" class="detail">
    <div class="detail_head">
      <p class="aler1">作业详情<span class="Xcancle" @click="viewHomeworkCancle">X</span></p>
    </div>
    <div class="assignment-grading">
      <h2>题目:</h2>
      <p>{{ assignment.question }}</p>
      <h2>学生答案:</h2>
      <p>{{ assignment.answer }}</p>
      <el-button type="primary" style="position: absolute;margin-left: 40%;margin-top: 20%;" @click="$router.push('/teacher/assignment/correct_homework')">批改作业</el-button>
    </div>
  </div>
  <div style="width: 100%;height: 90%;">
    <table class="homework_table">
      <thead class="homework_head">
        <tr>
          <th>顺序</th>
          <th>姓名</th>
          <th>提交时间</th>
          <th>得分</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr class="homework_tr" v-for="(student, index) in students" :key="student.id">
          <td>{{ index + 1 }}</td>
          <td>{{ student.user_name }}</td>
          <td>{{ student.submit_time }}</td>
          <td>{{ student.total_marks }}</td>
          <td>
            <span @click="$router.push('/teacher/assignment/correct_homework')" class="viewHomeworks">老师批改</span>
            <span @click="viewHomework" class="viewHomeworks">查看作业</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';

const router = useRouter();
const details = ref(false);
const goBack = () => {
  router.push('/teacher/assignment/card');
};

const students = reactive([
  { id: 1, user_name: '张三', submit_time: '2024-03-18 15:30', total_marks: 95 },
  { id: 2, user_name: '张三', submit_time: '2024-03-18 15:30', total_marks: 95 }
]);


const viewHomework = () => {
  details.value = true;
};

const viewHomeworkCancle = () => {
  details.value = false;
};


const assignment = ref({
  question: '请分析中国古代文学作品《红楼梦》中的主要人物形象特征，并结合具体情节进行论述（不少于800字）。重点分析以下几个方面：贾宝玉的叛逆性格与人生追求、林黛玉的孤傲与才情、薛宝钗的温婉与智慧。',
  answer: '《红楼梦》作为中国古典文学巅峰之作，其人物形象塑造极为成功...'
});



</script>

<style scoped>
.assignment-header {
  display: flex;
  justify-content: space-between;
  height: 7lvh;
  align-items: center;
  background-color: #13227A;
  color: white;
}

.back-button {
  background-color: transparent;
  margin-left: 3%;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}


.homework_table {
  width: 96%;
  margin-left: 2%;
  border-collapse: collapse;
}

.homework_head {
  height: 80px;
  padding: 8px;
}

.homework_tr {
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  border-radius: 5%;
}

.homework_tr td {
  padding: 8px;
  text-align: center;
}

.viewHomeworks {
  margin-left: 4px;
  color: rgb(46, 16, 218);
  cursor: pointer;
}

.viewHomeworks:hover {
  color: rgb(237, 16, 16);
}

.detail {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: rgb(238, 235, 235);
  border: 1px solid #cccccc;
  z-index: 999;
  display: cloumn;
}

.detail_head {
  float: left;
  height: 10%;
  width: 100%;
  background-color: #13227A;
}

.aler1 {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin-left: 2%;
  margin-top: 1.5%;
}

.aler1:hover {
  color: #ff0202;
  cursor: pointer;
}
.Xcancle {
  color: #ffffff;
  float: right;
  margin-right: 2%;
}

.Xcancle:hover {
  color: #ff0202;
  cursor: pointer;
}


.assignment-grading {
  float: left;
  width: 100%;
  height: 90%;
}

h2 {
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #666;
}

.el-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #13227A;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.el-button:hover {
  background-color: #1a3a8b;
}

</style>